<template>
  <Tabs :animated="false" v-model="activeTab" @on-click="handleTabClick">
    <TabPane label="基础信息" name="name1">
      <div>
        基础信息
      </div>
    </TabPane>
    <TabPane label="pod信息" name="name2">
      <div style="display:flex;flex-direction:row;margin-bottom: 10px">
<!--        <AddService></AddService>-->
<!--        <EditService :id="id"></EditService>-->
        <Input v-model="keyword" @on-search="searchPort" @on-clear="clearInput" search enter-button placeholder="关键字搜索" clearable style="width: 220px"/>
      </div>
      <div>
        <Table  @on-row-click="handleRowClick"	highlight-row border :columns="columns" :data="serviceData" size="small" ref="serviceTable"></Table>
      </div>
      <div>
<!--        <Button style="margin-top: 10px" type="primary" @click="exportData(1)"><Icon type="ios-download-outline"></Icon>源数据导出</Button>-->
      </div>
      <div>
        <Page style="margin-top: 10px;text-align: center"  @on-change="handlePageChange" :current="currentPage" :total="total" show-total />
      </div>
    </TabPane>
    <TabPane label="主机信息" name="name3">
      <div style="display:flex;flex-direction:row">
<!--        <AddHosts></AddHosts>-->
<!--        <Button type="primary" style="margin-bottom: 10px">修改主机</Button>-->
      </div>
      <div>
        <Table highlight-row border :columns="hostcolumns" :data="hostData" size="small" ref="hostsTable"></Table>
      </div>
    </TabPane>
    <TabPane label="基础信息" name="name4">
      <div>
        name4
      </div>
    </TabPane>
    <TabPane label="基础信息" name="name5">
      <div>
        name5
      </div>
    </TabPane>
    <TabPane label="基础信息" name="name6">
      <div>
        name6
      </div>
    </TabPane>
  </Tabs>
</template>

<script>
// import axios from "axios";
// import AddHosts from "@/components/AddHosts.vue";
// import AddService from "@/components/AddService.vue";
// import EditService from "@/components/EditService.vue";

export default {
  name:'K8sDetails',
  // components: {AddHosts,AddService,EditService},
  inject:['reload'],

  data() {
    return {
      hostcolumns: [
        {title: '主机名', key: 'hostname', align: 'center'},
        {title: 'IP', key: 'ip', align: 'center'},
        {title: '系统平台', key: 'system', align: 'center'},
        {title: 'K8s版本', key: 'version', align: 'center'},
        {title: '内核版本', key: 'kernel', align: 'center'},
        {title: 'docker版本', key: 'docker', align: 'center'},
        {title: '角色', key: 'role', align: 'center'}
      ],
      columns: [
        {title: '模块名称', key: 'module_name', fixed: 'left', width: 200, align: 'center'},
        {title: '研发人员', key: 'develop_name', align: 'center'},
        {title: '服务名称', key: 'server_name', align: 'center'},
        {
          title: '代码修改', key: 'isedit', align: 'center', filters: [
            {
              label: '已修改',
              value: 1
            },
            {
              label: '未修改',
              value: 2
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 1) {
              return row.isedit === '已修改';
            } else if (value === 2) {
              return row.isedit === '未修改';
            }
          }
        },
        {
          title: '代码部署', key: 'isdeploy', align: 'center', filters: [
            {
              label: '已部署',
              value: 1
            },
            {
              label: '未部署',
              value: 2
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 1) {
              return row.isdeploy === '已部署';
            } else if (value === 2) {
              return row.isdeploy === '未部署';
            }
          }
        },
        {title: '分支名称', key: 'branch_name', align: 'center'},
        {
          title: '操作',
          key: 'more',
          align: 'center',
          render: (h) => {
            return h('Button', {
              props: {
                type: 'error'
              },
              on: {
                click: () => this.deleteItem()
              }
            }, '删除');
          }
        }
      ],
      serviceData: [],
      hostData: [],
      activeTab: this.$route.query.tab, // 设置默认的选项卡
      id: null,
      total:0, //总数据条数
      currentPage: 1, // 当前页码
      keyword:'',
    };
  },
  mounted() {
    this.getServiceData();
    this.getHostsData();
  },
  methods: {
    handlePageChange(currentPage){
      // 当页码变化时，更新currentPage并重新获取表格数据
      this.currentPage = currentPage;
      this.getServiceData();
    },
    handleRowClick(currentRow) {
      this.id = currentRow.id
    },
    background(type) {
      this.$Message[type]({
        background: true,
        content: type === 'success' ? '添加成功' : '添加失败'
      });
    },
    handleTabClick(tab) {
      this.activeTab = tab;// 点击选项卡时更新当前的选项卡
      const route = { query: { tab: tab } }; // 构建包含选项卡的路由对象
      this.$router.push(route); // 更新URL中的选项卡参数
    },
    searchPort() {
      this.getServiceData();
    },
    clearInput() {
      this.keyword = ''; // 清空关键字
      this.getServiceData(); // 重新获取服务数据
    },
  }
}
</script>
